<template>
  <section v-if="name === 'shippingName'">
    <template v-for="(item, index) in row && row.distinctCustomerName">
      <span :key="index"> {{ item }}；</span>
    </template>
  </section>
  <section v-else-if="name === 'customer'">
    <Tooltip v-if="iconName"
             :content="content"
             :placement="placement">
      <icon-svg class-name="iconClass mr5"
                :icon-name="iconName" />
    </Tooltip>
    {{ row.showCustomerName || (row.customer && row.customer.showCustomerName ) || row.customerName  || (row.customer && row.customer.customerName) }}
  </section>
  <section v-else-if="['shipping', 'billShipping'].includes(name)"
           :class="name === 'billShipping' ? classFlag : ''">
    <el-tooltip placement="top">
      <div slot="content">
        {{ row.customerName }}<br />
        {{ row.toContactName }} {{ row.toContactMobile }}<br />
        <span class="area-class">
          {{ row.fromProvince }}{{ row.fromCity }}{{ row.fromDistrict }} </span><br />
        {{ row.toAddress }}
      </div>
      <div>
        {{ row.customerName }} <br />
        {{ row.fromProvince }}{{ row.fromCity }}{{ row.fromDistrict }}
      </div>
    </el-tooltip>
  </section>
  <section v-else-if="name === 'orderList' && row"
           :class="`${classFlag} section-wrap`">
    {{ row.customerName }}<br />
    <span v-if="row.fromAddress">
      {{ row.fromAddress.contactName }} {{ row.fromAddress.contactMobile }}<br />
      {{ row.fromAddress.province }} {{ row.fromAddress.city }} {{ row.fromAddress.district }}<br />
      {{ row.fromAddress.address }}
    </span>
  </section>
  <section v-else-if="name === 'cretReceiptList' && row.fromAddress">
    {{ row.fromAddress.province }} {{ row.fromAddress.city }} {{ row.fromAddress.district }}<br />
    {{ row.fromAddress.address }}
  </section>
  <section v-else-if="name === 'orderImport'"
           :class="`${classFlag} section-wrap`">
    {{ row.customerName }}<br />
    {{ row.fromContactName }} {{ row.fromContactMobile }}<br />
    {{ row.fromProvince }} {{ row.fromCity }} {{ row.fromDistrict }}{{ row.fromAddress }}
  </section>
  <section v-else
           :class="`${classFlag} section-wrap`">
    {{ row.customerName }}<br />
    {{ row.fromContactName }} {{ row.fromContactMobile }}<br />
    <!-- {{row.consigneeName}} -->
    {{ row.fromProvince }} {{ row.fromCity }} {{ row.fromDistrict }}<br />
    {{ row.fromAddress }}
  </section>
</template>

<script>
import Tooltip from "@components/basic/Tooltip.vue";
export default {
  name: "ShippingInfo",
  props: {
    row: {
      type: Object,
      default: () => { }
    },
    name: {
      type: String
    },
    classFlag: {
      type: String,
      default: ""
    }
  },
  components: {
    Tooltip
  },
  computed: {
    placement () {
      return 'top'
    },
    content () {
      const { customer, showCustomerType } = this.row
      let value = null
      if (customer) {
        value = customer?.showCustomerType
      } else {
        value = showCustomerType
      }
      switch (value) {
        case 0:
          return '线下';
        case 1:
          return '线上';
        default:
          return '';
      }
    },
    iconName () {
      const { customer, showCustomerType } = this.row
      let value = null
      if (customer) {
        value = customer?.showCustomerType
      } else {
        value = showCustomerType
      }
      switch (value) {
        case 0:
          return 'xianxia';
        case 1:
          return 'xianshang';
        default:
          return '';
      }
    }
  }
};
</script>
<style scoped>
.section-wrap {
  width: 100%;
  display: -webkit-box;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  /* white-space: pre-line; */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.red {
  color: var(--prev-color-text-red);
}
.mr5 {
  margin-right: 5px;
}
</style>
